<template>
  <div id="data-overview">
    <el-container style="height: 100vh; border: 1px">
      <el-header>
        <HeaderBar></HeaderBar>
      </el-header>

      <el-container style="flex: 1; display: flex;">
        <!-- 左侧栏 -->
        <el-aside :width="sidebarWidth" style="transition: width 0.3s ease;">
          <Sidebar @sidebar-toggle="handleSidebarToggle"></Sidebar>
        </el-aside>
        <!-- 主体内容区 -->
        <el-main :style="{
          marginLeft: '0',
          transition: 'margin-left 0.3s ease',
          width: `calc(100% - ${sidebarWidth})`
        }">
          <!-- 数据概览卡片 -->
          <div class="overview">
            <div class="card-group">
              <div class="stat-card">
                <p class="card-title">总用户数</p>
                <p class="card-value"> {{ userNum }} </p>
              </div>
              <div class="stat-card">
                <p class="card-title">企业用户</p>
                <p class="card-value">{{ companyNum }}</p>
              </div>
              <div class="stat-card">
                <p class="card-title">活跃职位</p>
                <p class="card-value">{{ activePositionsNum }}</p>
              </div>
              <div class="stat-card">
                <p class="card-title">简历投递</p>
                <p class="card-value">{{ CVNum }}</p>
              </div>
            </div>
          </div>

          <!-- 待处理任务 -->
          <div class="task-list-container">
            <div class="task-header">
              <h2 class="task-title">待处理任务</h2>
              <el-button type="text" class="refresh-btn" @click="fetchReviewData">刷新</el-button>
            </div>

            <!-- 企业审核卡片 -->
            <el-card class="task-card" shadow="hover">
              <div slot="header" class="card-header">
                <span>企业审核</span>
                <el-button type="primary" class="handle-btn" @click="goToCompanyReview">立即处理</el-button>
              </div>
              <div class="card-content">
                <p class="desc" v-if="companyReviewData.length > 0">有{{ companyReviewData.length }}家企业等待审核</p>
                <p class="desc" v-else>暂无企业待审核</p>
                <div class="avatar-group" v-if="companyReviewData.length > 0">
                  <span v-for="(item, index) in companyReviewData.slice(0, 4)" :key="index" class="company-tag">{{
                    item.name }}</span>
                  <span class="more" v-if="companyReviewData.length > 4">+{{ companyReviewData.length - 4 }}家企业</span>
                </div>
              </div>
            </el-card>

            <!-- 职位审核卡片 -->
            <el-card class="task-card" shadow="hover">
              <div slot="header" class="card-header">
                <span>职位审核</span>
                <el-button type="primary" class="handle-btn" @click="goToJobReview">立即处理</el-button>
              </div>
              <div class="card-content">
                <p class="desc" v-if="jobReviewData.length > 0 || jobChangeData.length > 0">
                  有{{ jobReviewData.length }}个职位等待审核，{{ jobChangeData.length }}个职位等待变更
                </p>
                <p class="desc" v-else>暂无职位待审核</p>
                <div class="position-group" v-if="jobReviewData.length > 0 || jobChangeData.length > 0">
                  <template v-for="(item, index) in jobReviewData.slice(0, 3)">
                    <span class="position-tag" :title="`待审核：${item.positionName}`" :key="`review-${item.id || index}`">
                      {{ item.positionName }}
                    </span>
                  </template>
                  <template v-for="(item, index) in jobChangeData.slice(0, 3)">
                    <span class="position-tag change-tag" :title="`待变更：${item.oldPositionMessage.positionName}`"
                      :key="`change-${item.id || item.oldPositionMessage.id || index}`">
                      {{ item.oldPositionMessage.positionName }}
                      <i class="el-icon-refresh"></i>
                    </span>
                  </template>
                  <span class="more" v-if="jobReviewData.length + jobChangeData.length > 6">
                    +{{ jobReviewData.length + jobChangeData.length - 6 }}个职位
                  </span>
                </div>
              </div>
            </el-card>

          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { getAllUserNum, getCompanyNum, getActivePositions, getCVNum } from "@/util/manager_api/data-overview";
import { getRecruiterCompanyRegisterLists } from "@/util/manager_api/company";
import { getPublishPositionLists, getUpdatedPositionLists } from '@/util/manager_api/position';
import Sidebar from "@/components/ManagerSidebar.vue";
import HeaderBar from "@/components/ManagerHeaderBar.vue";

export default {
  components: {
    Sidebar,
    HeaderBar,
  },
  data() {
    return {
      userNum: 1,
      companyNum: 0,
      activePositionsNum: 0,
      CVNum: 0,
      isSidebarCollapsed: false,
      companyReviewData: [],
      jobReviewData: [],
      jobReviewData: [],
      jobChangeData: [],
    };
  },
  computed: {
    // 根据收缩状态计算侧边栏宽度
    sidebarWidth() {
      return this.isSidebarCollapsed ? '30px' : '200px';
    }
  },
  created() {
    this.fetchData();
    this.fetchReviewData();
  },
  methods: {
    async fetchData() {
      try {
        const user = await getAllUserNum();
        const company = await getCompanyNum();
        const position = await getActivePositions();
        this.userNum = user.data.data;
        this.companyNum = company.data.data;
        this.activePositionsNum = position.data.data;
      } catch (error) {
        console.log('数据获取失败:', error);
      }
    },
    async fetchReviewData() {
      try {
        // 获取企业审核数据
        const companyResponse = await getRecruiterCompanyRegisterLists();
        this.companyReviewData = companyResponse.data.data;

        // 获取职位审核数据
        const jobReviewResponse = await getPublishPositionLists();
        this.jobReviewData = jobReviewResponse.data.data || [];

        // 获取职位变更数据
        const jobChangeResponse = await getUpdatedPositionLists();
        this.jobChangeData = jobChangeResponse.data.data || [];
      } catch (error) {
        console.error("加载审核数据失败:", error);
      }
    },
    // 处理侧边栏收缩状态变化
    handleSidebarToggle(isCollapsed) {
      this.isSidebarCollapsed = isCollapsed;
    },
    goToCompanyReview() {
      this.$router.push({ name: 'manage-review', params: { activeTab: 'company' } });
    },
    goToJobReview() {
      this.$router.push({ name: 'manage-review', params: { activeTab: 'job' } });
    },
    formatTime(timestamp) {
      const now = Date.now();
      const diff = now - timestamp;
      const days = Math.floor(diff / (24 * 60 * 60 * 1000));
      return days > 0 ? `${days}天前` : '今天';
    }
  }
};
</script>

<style scoped>
.el-header {
  height: 60px;
  width: 100%;
}

/* 侧边栏 */
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 200px;
  width: 200px;
}


/* 主体内容 */
.el-main {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
  color: #333;
  font-size: 20px;
  padding: 20px;
  color: #333;
  font-size: 20px;
  padding: 20px;
}



/* 数据概览样式 */
.overview {
  margin-bottom: 20px;
}

.card-group {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  min-width: 200px;
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

/* 待处理任务样式 */
/* 待处理任务样式 */
.task-list-container {
  margin-top: 12px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.task-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.refresh-btn {
  color: #409EFF;
}

.refresh-btn:hover {
  color: #007bff;
}

.task-card {
  margin-bottom: 10px;
  margin-bottom: 10px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.handle-btn {
  padding: 4px 12px;
  font-size: 12px;
}

.card-content {
  padding-top: 10px;
}

.desc {
  color: #666;
  margin-bottom: 10px;
}

/* 企业标签样式 */
.company-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.company-tag {
  background-color: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* 职位标签样式 */
.position-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.position-tag {
  background-color: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* 待变更职位特殊样式 */
.change-tag {
  background-color: #e8f7ff;
  border-left: 2px solid #409EFF;
}

.change-tag .el-icon-refresh {
  font-size: 12px;
  margin-left: 4px;
  color: #409EFF;
}

/* 更多提示样式 */
.more {
  display: inline-block;
  background-color: #f0f2f5;
  padding: 4px 8px;
  border-radius: 4px;
  color: #666;
  font-size: 12px;
}
</style>